Hello & Welcome!

Acknowledgement

  • This workshop is sponsored by
    • Faculty of Science and Engineering
    • School of Mathematical and Physical Sciences
    • FSE Student Experience Team

Day 1 content is inspired by the workshop materials of:

  • Build-a-Dashboard Workshop @ posit::conf(2024) by Mine Çetinkaya-Rundel.

Computation Setup

Have you done this alreday?

Make sure that you’ve completed the setup steps at

https://datavizatmq.netlify.app/workshop.html#software-setup

Meeting you where you are

We’ll assume you

  • know some R and/or Python

  • have worked in RStudio and/or VS Code

  • want to learn about Quarto Dashboards

We’ll teach you

  • basics of a Quarto Dashboard

  • making your dashboards dashing ✨

  • some R and/or Python tips along the way

Let’s go…

Hello, Dashboards!

Quarto

  • is a (relatively) new, open-source, scientific, and technical publishing system
  • aims to make the process of creating and collaborating dramatically better

Quarto version

Tip

Run the following in your Terminal to find your Quarto version:

Terminal
quarto --version

We need to start with markup

  • A markup (language) is a system for annotating a document in a way that is visually distinguishable from the content.
  • It is used only to format the text, so that when the document is processed, the markup language does not appear.
    • The term markup is partly evolved from how editors were communicating changes on a manuscripts.

Now we move to markdown

  • There are many markup language on the market
    • html
    • Markdown
    • LaTeX
  • Markdown is a lightweight markup language that you have to use code to add formatting elements to your content.
  • Portable, platform independent, and widely used.

How does Quarto work?

Artwork by @allison_horst

Let’s compare a .qmd file with its html output

YAML

  • Stands for YAML Ain’t Markup Language
    • Previously stands for Yet Another Markup Language
  • Appears at the top of your document.
  • YAML is commonly used for configuration files, and starts and ends with ---
  • Within the YAML, you can change
    • Author and document information
    • Document type so you can use a single one markdown file to generate many different formats

Let’s talk more about Quarto

Why the name “Quarto”?

  • Quarto had meaning in the history of publishing, which is the format of a book or pamphlet produced from full sheets printed with eight pages of text, four to a side, then folded twice to produce four leaves.

Creating an Quarto Document in R Studio

  • File \(\rightarrow\) New File \(\rightarrow\) Quarto Document;

  • or

Creating an Quarto Document in R Studio (cont.)

  • Choose appropriate options.
    • You may want to use the visual markdown editor as your default editor.
  • Both .rmd and .qmd are just a plain text file.

Your mission, should you choose to accept it!

  • Create a Quarto/QMD documents (from the template) and output as html.
  • Try to render them and observe the output.

03:00

Dashboard gallery

🍰 Olympic Games dashboard - R

🔗 mine.quarto.pub/olympic-games-r

🍰 Olympic Games dashboard - Python

🔗 mine.quarto.pub/olympic-games-py

Notebook ➝ Dashboard

olympicdash-r.qmd
---
title: "Olympic Games"
format: dashboard
---

# notebook content goes here...
olympicdash-py.qmd
---
title: "Olympic Games"
format: dashboard
---

# notebook content goes here...

Dashboard basics

Cards

Dashboards are composed of cards.

Rows and columns

Cards are arranged into rows and columns.

Layouts

Pages, tabsets, and sidebars allow for more advanced layouts.

Step-by-step

Let’s make a dashboard, step-by-step

  • First with R

  • Then with Python

First dashboard in R

Step 1: format: dashboard

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

Step 2: Add a card

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Step 2: Add a card

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

Step 3: Add another card

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 3: Add another card

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 4: Add titles to cards

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Step 4: Add titles to cards

Left column

Right column

dashboard-r.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{r}
library(ggplot2)
```

```{r}
#| title: Highway vs. city mileage
ggplot(mpg, aes(x = cty, y = hwy)) +
  geom_point()
```

```{r}
#| title: Drive types
ggplot(mpg, aes(x = drv)) +
  geom_bar()
```

Steps 1 - 4

First dashboard in Python

Step 1: format: dashboard

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

Step 2: Add a card

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point
from plotnine.data import mpg
```

```{python}
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

Step 2: Add a card

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point
from plotnine.data import mpg
```

```{python}
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

Step 3: Add another card

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

```{python}
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

```{python}
(
    ggplot(mpg, aes(x = "drv"))
    + geom_bar()
)
```

Step 3: Add another card

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

```{python}
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

```{python}
(
    ggplot(mpg, aes(x = "drv"))
    + geom_bar()
)
```

Step 4: Add titles to cards

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

```{python}
#| title: Highway vs. city mileage
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

```{python}
#| title: Drive types
(
    ggplot(mpg, aes(x = "drv"))
    + geom_bar()
)
```

Step 4: Add titles to cards

dashboard-py.qmd
---
title: "My first Quarto dashboard"
format: dashboard
---

```{python}
from plotnine import ggplot, aes, geom_point, geom_bar
from plotnine.data import mpg
```

```{python}
#| title: Highway vs. city mileage
(
    ggplot(mpg, aes(x = "cty", y = "hwy"))
    + geom_point()
)
```

```{python}
#| title: Drive types
(
    ggplot(mpg, aes(x = "drv"))
    + geom_bar()
)
```

Steps 1 - 4

Dashboard Layout

Title & Author

  • The title and author are specified as they are with normal documents.
  • You can also include a logo and one or more nav-buttons:
dashboard-r.qmd or dashboard-py.qmd
---
title: "My first Quarto dashboard"
author: "DataViz Team"
format: 
    dashboard: 
    logo: images/logo.png
    nav-buttons: [linkedin, github]
    linkedin: https://www.linkedin.com/in/thomas-fung-dr/
    github: https://github.com/thomas-fung
---
  • The following special aliases are recognised for navigation buttons: linkedin, facebook, reddit, twitter, and github.
  • You can also create custom buttons too!
    • Please refer to quarto documentation for details.

Layout

  • Dashboard components are laid out using alternating sets of rows and columns.
  • Rows and columns are in turn defined by markdown headings and computational cells.
dashboard-py.qmd
---
title: "My first Quarto dashboard"
author: "DataViz Team"
format: dashboard
---
    
## Row {height=70%}

```{python}
```

## Row {height=30%}

```{python}
```

```{python}
```

Orientation

  • By default, dashboard pages are laid out first by row, then by column.
  • However, you can change this by specifying the orientation: columns in the yaml.
dashboard-py.qmd
---
title: "My first Quarto dashboard"
author: "DataViz Team"
format: 
    dashboard: 
        orientation: columns
---
   
## Column {width=60%}

```{python}
```

## Column {width=40%}

```{python}
```

```{python}
```

Your turn

Start

R - Clone the GitHub repo posit-conf-2024/olympicdash (https://github.com/posit-conf-2024/olympicdash) and work on olympicdash-r-1.qmd.

Python - Clone the GitHub repo posit-conf-2024/olympicdash (https://github.com/posit-conf-2024/olympicdash) and work on olympicdash-py-1.qmd.

Goal

Your goal is to create one of the following dashboards.

Step 1

  • Turn the output to a dashboard.
  • Add titles to code cells.

05:00

Step 2

  • Add a GitHub icon and link to a GitHub repository (that may or may not contain the code for the dashboard you’re building).
  • Add the olympics logo from the images folder.

05:00

Step 3

Reorganize the cards into rows and columns as shown below.

05:00

Morning tea time!

asdfas

datavizatmq.netlify.app